/**
 * @function 3.用来创建相机和渲染器对象
 */
// 引入Three.js
import * as THREE from 'three'
// 导入OrbitControls控件 用来拖拽和放大缩小模型
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入Vue组合API
import { reactive } from 'vue'
// 导入配置项
import config from './config'
// HTML标签相关代码
// 导入配置信息
const { content } = config()
// 代理渲染的参数
const contentCamera = reactive({
  // 渲染宽度 当前页面的宽度
  width: window.innerWidth,
  // 渲染高度 当前页面的高度
  height: window.innerHeight,
  // 渲染范围
  size: 100
})
/**
* 相机设置
*/
// camera.lookAt(0, 0, 0) // 相机指向Three.js坐标系原点
const camera = new THREE.PerspectiveCamera(45, contentCamera.width / contentCamera.height, 1, 3000)
camera.position.set(318, 162, 204)// 通过相机控件OrbitControls旋转相机，选择一个合适场景渲染角度
camera.lookAt(0, 0, 0)
/**
 * 创建渲染器对象
 */
const renderer = new THREE.WebGLRenderer({
  antialias: true // 开启锯齿
})
renderer.outputEncoding = THREE.sRGBEncoding// 解决加载gltf格式模型纹理贴图和原图不一样问题
renderer.setPixelRatio(window.devicePixelRatio)// 设置设备像素比率,防止Canvas画布输出模糊。
renderer.setSize(contentCamera.width, contentCamera.height) // 设置渲染区域尺寸
renderer.setClearColor(content.fogColor) // 设置背景颜色
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
// renderer.domElement表示Three.js渲染结果,也就是一个HTML元素(Canvas画布)
// document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

// 创建控件对象  控件可以监听鼠标的变化，改变相机对象的属性
// 旋转：拖动鼠标左键
// 缩放：滚动鼠标中键
// 平移：拖动鼠标右键
const controls = new OrbitControls(camera, renderer.domElement)
// 启动平滑过度效果
controls.enableDamping = true

export { renderer, camera, contentCamera }
